<template>
  <div class="xk857-container" v-loading="loading">
    <!-- 条件查询 -->
    <el-form :inline="true" :model="query" size="mini">
      <el-form-item label="商品标题:">
        <el-input auto-complete="off" v-model.trim="query.goodName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="list"
      style="width: 100%;border-radius: 10px"
    >
      <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
      <el-table-column align="center" prop="goodName" label="商品标题"></el-table-column>
      <el-table-column align="center" prop="deliveryAddrId" label="收获地址"></el-table-column>
      <el-table-column align="center" prop="seckillPrice" label="秒杀价">
        <template slot-scope="scope">
          <span style="color: #373737">{{ scope.row.goodsOldPrice }}元</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="seckillPrice" label="实付款">
        <template slot-scope="scope">
          <span style="font-size: 16px;font-family: 方正粗黑宋简体;color: #035e23">{{ scope.row.goodsPrice }}元</span>
          <span style="font-size: 18px;font-family: 方正粗黑宋简体;color: #ff4114;margin-left: 10px">{{
              scope.row.goodsDiscount
            }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="seckillPrice" label="订单状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0">已下单</el-tag>
          <el-tag v-if="scope.row.status === 1" type="success">已支付</el-tag>
          <el-tag v-if="scope.row.status === 2" type="warning">已发货</el-tag>
          <el-tag v-if="scope.row.status === 4" type="danger">已退款</el-tag>
          <el-tag v-if="scope.row.status === 5" type="success">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="startDate" label="下单时间">
        <template slot-scope="scope">
          <span>{{ getDataFormat(scope.row.createDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="330">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.row.id)" v-if="scope.row.status === 0 || scope.row.status === 1"  size="mini">已发货</el-button>
          <el-button type="danger" @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.current"
      :page-sizes="[10, 20, 50]"
      :page-size="query.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total"
      style="margin-top: 10px"
    >
    </el-pagination>

  </div>
</template>

<script>
import { format } from '@/utils/date'
import api from '@/api/orderInfo'

export default {
  name: 'index',
  data() {
    return {
      list: [],
      loading: false,
      query: {
        current: 1,
        size: 10,
        total: 0,
        goodName: ''
      }
    }
  },

  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      const { data } = await api.getList(this.query)
      this.list = data.records
      this.query.total = data.total
      this.loading = false
    },
    // 条件查询
    queryData() {
      // 将页码变为1，第1页
      this.query.current = 1
      this.fetchData()
    },
    getDataFormat(date) {
      return format(date, 'yyyy-MM-dd hh:mm')
    },
    // val 是切换之后的每页显示多少条
    handleSizeChange(val) {
      this.query.size = val
      this.fetchData()
    },
    openAdd() {
      this.$router.push({ name: 'goods_edit' })
    },
    // 当页码改变后触发到此方法，val 是当前点击（或输入）的那个页码，
    handleCurrentChange(val) {
      this.query.current = val
      this.fetchData()
    },
    // 编辑
    handleEdit(id) {
      this.$confirm('确认已发货？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        api.ship(id).then(response => {
          // 处理响应结果提示
          this.$message({
            type: response.code === 20000 ? 'success' : 'error',
            message: response.message
          })
        })
        // 刷新列表数据
        this.fetchData()
      }).catch(() => {
        // 取消删除，不用理会
      })
    },

    // 删除
    handleDelete(id) {
      this.$confirm('确认删除这条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        api.deleteById(id).then(response => {
          // 处理响应结果提示
          this.$message({
            type: response.code === 20000 ? 'success' : 'error',
            message: response.message
          })
        })
        // 刷新列表数据
        this.fetchData()
      }).catch(() => {
        // 取消删除，不用理会
      })
    },
    // 重置
    reload() {
      this.query = {
        current: 1,
        size: 10,
        total: 0,
        goodsTitle: '',
        endDate: '',
        startDate: ''
      }
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.hide {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
